<template>
  <div class="home-view">
    <div class="main">
      <div class="top">
        <div class="left">
          <div class="ciyun">
            <lb-wordCloud class="wordCloud"></lb-wordCloud>
          </div>
          <div class="guanxi">
            <lb-RelationShip></lb-RelationShip>
          </div>
        </div>
        <div class="mid">
          <div class="map">
            <!-- 地图 -->
            <lb-mapbox class="mapbox"></lb-mapbox>
            <!-- 信息框 -->
            <div class="message" id="m1">
              <strong>总里程: {{ $store.state.kilometer }} 公里</strong>
            </div>
            <!-- 事件轮播 -->
            <div class="messageContainer">
              <div
                ref="messageBox"
                class="messageBox"
                v-if="$store.state.isMessageDisplay"
              >
                <div v-for="item in eventsList" :key="item">
                  <strong
                    >公元{{ item.time }}年,时{{ item.year }},李白{{
                      age
                    }}岁</strong
                  >
                  <br /><br />
                  <strong>{{ item.things }}</strong>
                </div>
              </div>
            </div>
            <!-- 人物 -->
            <lb-Figure class="figure"></lb-Figure>
          </div>
          <div class="timeLine">
            <lb-shijianLine></lb-shijianLine>
          </div>
        </div>
        <div class="right">
          <div class="sun">
            <lb-sunVue></lb-sunVue>
          </div>
          <div class="pie" v-if="isPie">
            <lb-pieVue></lb-pieVue>
          </div>
          <div class="leida" v-else>
            <lb-LeiDa></lb-LeiDa>
          </div>
        </div>
      </div>
      <div class="zhexian">
        <lb-TimeLine></lb-TimeLine>
      </div>
    </div>
  </div>
</template>

<script>
import MapBoxLocus from "@/components/MapBox/MapBoxLocus.vue";
import FigureImage from "@/components/CeShi/FigureImage.vue";
import leidaVue from "@/components/LeiDa/leida.vue";
import TimeLine from "@/components/CeShi/TimeLine.vue";
import wordCloud from "@/components/WordCloud/wordCloud.vue";
import RelationShip from "@/components/RelationShip/RelationShip.vue";
import shijianLine from "@/components/shijianLine/shijianLine.vue";
import sunVue from "@/components/Sun/sun.vue";
import pieVue from "@/components/pie/pie.vue";
import { useStore } from "vuex";
import { ref, watch } from "vue";
export default {
  name: "HomeView",
  components: {
    "lb-mapbox": MapBoxLocus,
    "lb-Figure": FigureImage,
    "lb-LeiDa": leidaVue,
    "lb-TimeLine": TimeLine,
    "lb-wordCloud": wordCloud,
    "lb-RelationShip": RelationShip,
    "lb-shijianLine": shijianLine,
    "lb-sunVue": sunVue,
    "lb-pieVue": pieVue,
  },
  setup() {
    const store = useStore();
    let isPie = ref(false);

    watch(
      () => store.state.title,
      (newTitle) => {
        if (newTitle) {
          isPie.value = true;
        } else {
          isPie.value = false;
        }
      }
    );
    return {
      isPie,
      clearOtherDiv() {
        if (isPie.value) {
          const leidaDiv = document.querySelector(".leida");
          leidaDiv.innerHTML = "";
        } else {
          const pieDiv = document.querySelector(".pie");
          pieDiv.innerHTML = "";
        }
      },
    };
  },
};
</script>


<style scoped>
.home-view {
  display: flex;
}

.main {
  width: 100%;
  height: 100%;
  /* border: 1px solid; */
}
.top {
  height: 80%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid; */
}
.left {
  height: 100%;
  width: 25%;
  /* border: 1px solid; */
}
.ciyun {
  width: 100%;
  height: 50%;
  /* border: 1px solid; */
}
.wordCloud {
  width: 100%;
  height: 100%;
}
.guanxi {
  height: 50%;
  width: 100%;
  /* border: 1px solid; */
}
.mid {
  height: 100%;
  width: 50%;
  /* border: 1px solid; */
}
.title {
  margin-top: 2.5%;
  height: 10%;
  width: 100%;
  /* border: 1px solid; */
  text-align: center;
  font-size: 48px;
  font-family: Time, serif;
  /* line-height: center; */
  align-items: center;
}
.map {
  height: 75%;
  width: 100%;
  margin-top: 5%;
  /* margin-bottom: auto; */
}

.timeLine {
  height: 20%;
  width: 100%;
  display: flex;
  /* margin-top: 10%; */
  /* margin-bottom: auto; */
}
.mapbox {
  height: 100%;
  width: 100%;
  opacity: 0.7;
}
.right {
  height: 100%;
  width: 25%;
  /* border: 1px solid; */
}
.sun {
  height: 50%;
  width: 100%;
  /* border: 1px solid; */
}
.leida {
  height: 50%;
  width: 100%;
  /* border: 1px solid; */
}

.pie {
  height: 50%;
  width: 100%;
  /* border: 1px solid; */
}

.zhexian {
  width: 100%;
  height: 20%;
  /* border: 1px solid; */
}
.message {
  position: absolute;
  margin-left: 28%;
  font-family: "楷体";
  font-size: 1.5vh;
  font-weight: 900;
  color: #737cbd;
}
#m1 {
  top: 10%;
  left: -2%;
  width: 30vw;
  height: 7vh;
}
#m2 {
  top: 30%;
  right: 3%;
  width: 30vw;
  height: 30vh;
}
.messageContainer {
  top: 30%;
  right: 3%;
  width: 30vw;
  height: 30vh;
  position: absolute;
  overflow: hidden;
}
.messageBox {
  /* width: 30vw; */
  height: 30vh;
  font-family: "楷体";
  font-size: 2.5vh;
  font-weight: 900;
  color: #737cbd;
  margin-top: calc(-30vh * var(--m-top));
  transition: 1s;
}
.messageBox div {
  height: 100%;
  width: 30vw;
}
.figure {
  position: absolute;
  top: 9%;
  left: 47%;
  width: 20vw;
  height: 5vh;
  font-family: "楷体";
  font-size: 120%;
  font-weight: 900;
  color: #4d4b4c;
}
</style>